<template>
  <common-info-dialog
    :visible.sync="detailShow"
    @cancel="close"
    :infoLoading="infoLoading"
    :title="dialogTitle"
    width="70%"
  >
    <div class="detail-list">
      <common-list-tabs slot="tabs">
        <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
          <el-tab-pane label="告警信息" name="alarm"></el-tab-pane>
          <el-tab-pane label="目标IP信息" name="targetIpInfo"></el-tab-pane>
          <el-tab-pane label="关联日志" name="journal"></el-tab-pane>
        </common-tabs>
      </common-list-tabs>

      <component
        class="content-wrap"
        slot="content"
        :is="page"
        :key="page"
        @change="change"
        :params="params"
        :detail="detail"
      ></component>
    </div>
  </common-info-dialog>
</template>

<script>
import Alarm from "@/views/alarmCenter/components/components/alarm.vue";
import TargetIpInfo from "@/views/alarmCenter/components/components/targetIpInfo.vue";
import Journal from "@/views/alarmCenter/components/components/journal.vue";
export default {
  name: "AlarmInfo",
  components: { Alarm, TargetIpInfo, Journal },
  props: {
    targetIp: {
      type: Object,
      default: () => {},
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      detailShow: false,
      infoLoading: false,
      dialogTitle: "详情",
      page: "alarm",
      params: this.targetIp,
    };
  },
  mounted() {
    this.detailShow = true;
  },
  methods: {
    close() {
      this.detailShow = false;
      this.$emit("close");
    },
    change(to, params) {
      this.params = params;
      this.page = `${to}`;
    },
    tabChange() {
      this.params = this.targetIp;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .global-common-info-dialog-body {
  overflow: hidden;
}
.detail-list {
  height: 100%;
}

.content-wrap {
  padding: 0 12px;
  overflow-y: scroll;
  max-height: 450px;
}

::v-deep .content-container {
  overflow: initial !important;
  .el-table__empty-block{
    min-height: 400px;
  }
}
.alarm-public {
  margin-bottom: 18px;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}
::v-deep .row-division-18 {
  width: calc(100% + 24px) !important;
  margin-left: -12px !important;
  background: #eee !important;
}
</style>
